<template>
  <div class="net-error">
    <div class="img-svg">
      <svg
        width="122px"
        height="104px"
        viewBox="0 0 122 104"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        style="width: 100%; height: 100%"
      >
        <!-- Generator: Sketch 55 (78076) - https://sketchapp.com -->
        <title>连接断开</title>
        <desc>Created with Sketch.</desc>
        <g
          id="Page-1"
          stroke="none"
          stroke-width="1"
          fill="none"
          fill-rule="evenodd"
        >
          <g id="空白页" transform="translate(-40.000000, -664.000000)">
            <g id="连接断开" transform="translate(40.000000, 664.000000)">
              <g id="分组-3">
                <g id="背景/线" fill="#C3CBD6">
                  <g id="-">
                    <g
                      id="编组"
                      transform="translate(14.200000, 9.200000)"
                      fill-rule="nonzero"
                    >
                      <path
                        d="M0.8,73.1 C0.3581722,73.1 -5.68434189e-14,72.7418278 -5.68434189e-14,72.3 C-5.68434189e-14,71.8581722 0.3581722,71.5 0.8,71.5 L70.8,71.5 C71.2418278,71.5 71.6,71.8581722 71.6,72.3 C71.6,72.7418278 71.2418278,73.1 70.8,73.1 L0.8,73.1 Z M74.8,73.1 C74.3581722,73.1 74,72.7418278 74,72.3 C74,71.8581722 74.3581722,71.5 74.8,71.5 L77.3,71.5 C77.7418278,71.5 78.1,71.8581722 78.1,72.3 C78.1,72.7418278 77.7418278,73.1 77.3,73.1 L74.8,73.1 Z M83.8,73.1 C83.3581722,73.1 83,72.7418278 83,72.3 C83,71.8581722 83.3581722,71.5 83.8,71.5 L92.8,71.5 C93.2418278,71.5 93.6,71.8581722 93.6,72.3 C93.6,72.7418278 93.2418278,73.1 92.8,73.1 L83.8,73.1 Z M23.8,80.6 C23.3581722,80.6 23,80.2418278 23,79.8 C23,79.3581722 23.3581722,79 23.8,79 L30.8,79 C31.2418278,79 31.6,79.3581722 31.6,79.8 C31.6,80.2418278 31.2418278,80.6 30.8,80.6 L23.8,80.6 Z M35.3,80.6 C34.8581722,80.6 34.5,80.2418278 34.5,79.8 C34.5,79.3581722 34.8581722,79 35.3,79 L65.8,79 C66.2418278,79 66.6,79.3581722 66.6,79.8 C66.6,80.2418278 66.2418278,80.6 65.8,80.6 L35.3,80.6 Z M80,52.8 C80,51.7333333 81.6,51.7333333 81.6,52.8 L81.6,55.8 C81.6,56.2418278 81.2418278,56.6 80.8,56.6 L77.8,56.6 C76.7333333,56.6 76.7333333,55 77.8,55 L80,55 L80,52.8 Z M81.6,58.8 C81.6,59.8666667 80,59.8666667 80,58.8 L80,55.8 C80,55.3581722 80.3581722,55 80.8,55 L83.8,55 C84.8666667,55 84.8666667,56.6 83.8,56.6 L81.6,56.6 L81.6,58.8 Z M4,28.8 C4,27.7333333 5.6,27.7333333 5.6,28.8 L5.6,31.8 C5.6,32.2418278 5.2418278,32.6 4.8,32.6 L1.8,32.6 C0.733333333,32.6 0.733333333,31 1.8,31 L4,31 L4,28.8 Z M78.1,3.5 L80.8,3.5 C81.8666667,3.5 81.8666667,5.1 80.8,5.1 L78.1,5.1 L78.1,7.8 C78.1,8.86666667 76.5,8.86666667 76.5,7.8 L76.5,5.1 L73.8,5.1 C72.7333333,5.1 72.7333333,3.5 73.8,3.5 L76.5,3.5 L76.5,0.8 C76.5,-0.266666667 78.1,-0.266666667 78.1,0.8 L78.1,3.5 Z M5.6,34.8 C5.6,35.8666667 4,35.8666667 4,34.8 L4,31.8 C4,31.3581722 4.3581722,31 4.8,31 L7.8,31 C8.86666667,31 8.86666667,32.6 7.8,32.6 L5.6,32.6 L5.6,34.8 Z"
                        id="Path-2"
                      ></path>
                      <path
                        d="M14.0928932,61.1431458 C14.5642977,60.6717412 15.2714045,61.378848 14.8,61.8502525 L13.7393398,62.9109127 C13.5440777,63.1061748 13.2274952,63.1061748 13.032233,62.9109127 L11.9715729,61.8502525 C11.5001684,61.378848 12.2072751,60.6717412 12.6786797,61.1431458 L13.3857864,61.8502525 L14.0928932,61.1431458 Z M12.6786797,63.9715729 C12.2072751,64.4429774 11.5001684,63.7358706 11.9715729,63.2644661 L13.032233,62.2038059 C13.2274952,62.0085438 13.5440777,62.0085438 13.7393398,62.2038059 L14.8,63.2644661 C15.2714045,63.7358706 14.5642977,64.4429774 14.0928932,63.9715729 L13.3857864,63.2644661 L12.6786797,63.9715729 Z M22.9213203,8.8 C23.3927249,8.32859548 24.0998316,9.03570226 23.6284271,9.50710678 L22.567767,10.567767 C22.3725048,10.7630291 22.0559223,10.7630291 21.8606602,10.567767 L20.8,9.50710678 C20.3285955,9.03570226 21.0357023,8.32859548 21.5071068,8.8 L22.2142136,9.50710678 L22.9213203,8.8 Z M21.5071068,11.6284271 C21.0357023,12.0998316 20.3285955,11.3927249 20.8,10.9213203 L21.8606602,9.86066017 C22.0559223,9.66539803 22.3725048,9.66539803 22.567767,9.86066017 L23.6284271,10.9213203 C24.0998316,11.3927249 23.3927249,12.0998316 22.9213203,11.6284271 L22.2142136,10.9213203 L21.5071068,11.6284271 Z"
                        id="Path复制"
                      ></path>
                    </g>
                  </g>
                </g>
                <g id="分组" transform="translate(30.000000, 27.000000)">
                  <g id="分组-5" transform="translate(44.000000, 0.000000)">
                    <path
                      d="M8.09857103,21.4055708 L1.83242187,23.0667969 L3.3491463,18.6233981 C1.2750795,16.6462038 0,13.9595985 0,11 C0,4.92486775 5.372583,0 12,0 C18.627417,0 24,4.92486775 24,11 C24,17.0751322 18.627417,22 12,22 C10.634219,22 9.32172977,21.7908451 8.09857103,21.4055708 Z"
                      id="椭圆形-2"
                      stroke="#C3CBD7"
                      stroke-width="1.6"
                      fill="#FFFFFF"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <g id="分组-4" transform="translate(7.000000, 7.000000)">
                      <path
                        d="M9,7.69933183 C8.03828322,6.56786449 6.60463859,5.85 5.00332771,5.85 C3.39831876,5.85 1.96175136,6.57118399 1,7.70717749"
                        id="Oval-5"
                        stroke="#C3CBD7"
                        stroke-width="1.6"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      ></path>
                      <rect
                        id="Rectangle-2"
                        fill="#C3CBD7"
                        x="1.13242749e-14"
                        y="0"
                        width="1.6"
                        height="3"
                      ></rect>
                      <rect
                        id="Rectangle-2-Copy"
                        fill="#C3CBD7"
                        x="8.4"
                        y="0"
                        width="1.6"
                        height="3"
                      ></rect>
                    </g>
                  </g>
                  <g
                    id="分组-2"
                    transform="translate(0.000000, 18.000000)"
                    stroke="#C3CAD7"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.6"
                  >
                    <path
                      d="M0,13.8229161 C2.97317619,13.203863 4.99662047,12.2728925 8.53956978,10.1455232 C8.99189659,9.87344297 8.99189659,9.87344297 9.45178958,9.59697963 C16.1683671,5.56766162 20.8005726,4.2744323 29.2483469,5.37594433 L30.0527344,7.5 L26.7141113,8 L29.2483469,10.4709473 C28.2508814,11.2663022 27.7226352,11.5458307 27.6636085,11.539061 C21.319455,10.8114485 18.0897881,11.7784988 12.7121601,15.0045724 C12.2625285,15.2748693 12.2625285,15.2748693 11.8021151,15.5518107 C7.70146904,18.0140498 5.11473017,19.2041877 1.29261803,20"
                      id="路径"
                      fill="#F5F7F9"
                      fill-rule="nonzero"
                    ></path>
                    <path
                      d="M57,27.6206406 C55.8963319,26.4927686 55.0339675,25.4074044 53.6107915,23.4371943 C53.3043929,23.0123318 53.3043929,23.0123318 52.9928049,22.5805158 C48.4389865,16.2815977 44.7308171,13.2930638 36.6464376,11 L36.6464376,12.5 L34.2962977,13.6533203 L36.6464376,15.2 L35,17.0294603 C41.5627493,18.8909269 44.1796107,20.9999403 47.9692923,26.2418916 C48.2739272,26.6640747 48.2739272,26.6640747 48.5858047,27.09653 C50.1796654,29.3030318 51.2040892,30.5923625 52.581519,32"
                      id="路径"
                      fill="#F5F7F9"
                      fill-rule="nonzero"
                    ></path>
                    <path
                      d="M31.983229,0 L31.983229,2.81982549 L31.983229,0 Z M36.5886351,2.11516548 L34.2962977,3.88973916 L36.5886351,2.11516548 Z M37.7338708,6.89801763 L34.859784,6.26369492 L37.7338708,6.89801763 Z"
                      id="路径-7"
                    ></path>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </svg>
    </div>
    <div class="text">
      <icons name="i-caution" size="100" :fill="activeColor" />
      <div class="title">
        {{ isNetRecover ? recoveryTips : tips }}
      </div>
      <div v-show="isNetRecover">
        <p>
          <span :style="{ color: activeColor }">{{ second }} 秒</span>
          后自动返回页面
          <n-button
            round
            @click="backToPage"
            type="info"
            style="margin-left: 10px"
          >
            立即返回
          </n-button>
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="netError">
  import { useRouter } from 'vue-router'
  // import { getIconColor } from '@/hooks'
  import { getActivateColor } from '@/hooks'

  // @Todo: 错误页长连接恢复
  defineProps({
    tips: {
      type: String,
      default: '网络连接已断开，请检查您的网络！'
    },
    recoveryTips: {
      type: String,
      default: '网络连接已恢复，即将返回页面！'
    }
  })

  const router = useRouter()

  // const fill = getIconColor()
  const { color: activeColor } = getActivateColor()

  const isNetRecover = ref(false)
  const second = ref(3)
  let time: any = null
  /**
   * @description: 网络连接恢复
   * @return {*}
   */
  const handleNetRecover = () => {
    window['$message'].success('网络连接已恢复')
    isNetRecover.value = true
    // 设定返回计时器
    if (time) time = null
    time = setInterval(() => {
      if (second.value > 0) {
        second.value--
      } else {
        backToPage()
      }
    }, 1000)
  }
  /**
   * @description: 返回
   * @return {*}
   */
  const backToPage = (): void => {
    clearInterval(time)
    router.back()
    window.removeEventListener('online', handleNetRecover)
  }

  // 如果网络正常，跳转到上一页
  if (navigator.onLine) backToPage()

  // 监听网络连接事件
  window.addEventListener('online', handleNetRecover)

  // 销毁计时器
  onUnmounted(() => {
    clearInterval(time)
  })
</script>

<style lang="less" scoped>
  .net-error {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: @background-color-gray;
    .img-svg {
      min-height: 200px;
      width: 400px;
    }
    .title {
      font-size: 20px;
      color: var(--primary-color);
    }
    .description {
      color: gray;
    }
    .text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
</style>
